<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>EShopManager</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/lib/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/stylesheets/theme.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/lib/font-awesome/css/font-awesome.css" />
    <script src="${pageContext.request.contextPath }/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
	  <script src="${pageContext.request.contextPath}/static/lib/vue.js" type="text/javascript"></script>


	  <!-- 日期选择器 -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
	<!------------>

    <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .brand { font-family: georgia, serif; }
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>

    <script type="text/javascript">
	    // /**日期选择器**/
	    // $(function() {
	    //   $( "#datepicker" ).datepicker();
	    // });

	    /**全选、全不选**/
	    $(function() {
	  	  $("#all_ck").change(function(){
	  		  if ($(this).is(':checked')) {//全选
	  			  $("[name=ck]:checkbox").each(function(){
	  				  this.checked=true;
	  			  		//$(this).attr("checked",true);
	  			  });
	  		  }else{//全不选
	  			  $("[name=ck]:checkbox").each(function(){
	  				  this.checked=false;
	  			  		//$(this).attr("checked",false);
	  			  });
	  		  }

	  		});

	  	});

    </script>
  </head>
<body>

	<%--导入头部页面--%>
	<c:import url="../top.jsp"></c:import>
	<%--导入左边菜单栏页面--%>
	<c:import url="../left.jsp"></c:import>
    
    <div class="content">
		<div class="header">
			<h1 class="page-title">订单管理</h1>
		</div>
		
		<ul class="breadcrumb">
			<li><a href="ordermanager.jsp">订单管理</a> <span class="divider">/</span></li>
			<li class="active">订单列表</li>
		</ul>
		
		<div class="container-fluid">
		
			<div class="row-fluid">

				<div class="block">
					<a href="#page-filter" class="block-heading" data-toggle="collapse">筛选</a>
					<div id="page-filter" class="block-body collapse in">
						<div class="search-well">
							<form  class="form-inline" role="search"
								action="#" method="post">
								<input type="text" class="form-control" placeholder="订单号"
										name="stu_name" /> 
								<input type="text" class="form-control"
										placeholder="收货人" name="person_name" /> 
								<input type="text" class="form-control"
										placeholder="请选择下单日期" id="datepicker" name="date" />
								<select class="form-control" name="stu_sex">
									<option value="" selected="selected">--请选择状态--</option>
									<option value="-1">待付款</option>
									<option value="1">待发货</option>
									<option value="2">待收货</option>
									<option value="0">已取消</option>
									<option value="3">已完成</option>
								</select>
								<button type="submit" class="btn btn-default"><i class="icon-search"></i> 查询</button>

							</form>
						</div>
					</div>
				</div>
			</div>

			<div class="row-fluid">
				
						<span>共有 <b>99</b> 条记录</span>
						
						<div class="well">
							
							<div class="search-well">
				                <form class="form-inline" action="#">
				                    <select name="control">
										<option value="" selected="selected">--请选择--</option>
										<option value="1">取消</option>
										<option value="1">删除</option>
									</select>
				                    <button class="btn" type="button"><i class="icon-legal"></i> 操作</button>
				                </form>
            				</div>
							
							<table class="table">
								<thead>
									<tr id="theTableTitle">
										<th>
										<input type="checkbox" id="all_ck"  />
										订单号
										</th>
										<th>总金额</th>
										<th>下单时间</th>
										<th>收货人</th>
										<th>收货地址</th>
										<th>订单状态</th>
										<th>操作</th>
									</tr>
								</thead>
								
								<tbody>
									
										<tr v-for="(oder,i) in OrderArray" :key="i">
											<td>
											<input type="checkbox" id="ck" name="ck" value="1" />
												{{oder.order_id}}
											</td>
											<td>￥{{oder.order_price}}</td>
											<td>
												<a href="#">testYock</a>
												<br />
												2019-01-23 17:09:35.0
											</td>
											<td>
												{{oder.person}}
												<br />
												TEL：{{oder.phone}}
											</td>
											<td>{{oder.address}}</td>
											<td>
												
												
												
												
													
													
													
														{{oder.status}}
													
													,

														{{oder.status_pay}}
													
													
													,

														{{oder.status_send}}
													
													
													,

													{{oder.status_receive}}
													
													
													
												
												
												
												
											</td>
											<td>
												<a href="orders/info.action?order_id=154823457562754" title="查看">
													<i class="icon-search"></i>
												</a>
	              								<a href="javascript:deleteClick()" title="删除"><i class="icon-remove"></i></a>
											</td>
										</tr>
									

									
								</tbody>

							</table>
						</div>
						<div class="pagination pagination myul">
							<ul>
								<li class='disabled'><a href="#">&laquo;首页</a></li>
								<li class='disabled'><a href="#">上一页</a></li>
								<li><a href="#">1</a></li>
								<li class='active'><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">下一页</a></li>
								<li><a href="#">尾页&raquo;</a></li>
							</ul>
						</div>

					
				

			</div>


			<c:import url="../footer.jsp"></c:import>
		</div>
	
		
	</div>

<script>

	var boy = new Vue({
		el:".content",
		data:{
			OrderArray:[]

		},
		methods:{
			//查询订单数据,映射页面
			selectorder(){
				$.post("${pageContext.request.contextPath }/order/selectinfo.do",function(man){
					if (man.code==200){
						boy.OrderArray=man.data
						console.log(man.data)
					}
				})
			}

		},
		created(){
			this.selectorder()
		}

	})


</script>


    
    <script src="${pageContext.request.contextPath }/static/lib/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript">
		$("[rel=tooltip]").tooltip();
		$(function() {
			$('.demo-cancel-click').click(function() {
				return false;
			});
		});
	</script>

</body>
</html>